<template>
    <div class="report-two">
        <div class="header"></div>
        <div class="body">
            <h4>
                <span>02</span>成绩整体情况
            </h4>
            <chart :options="option" :style="{width:'90%','margin-left':'5%'}"></chart>
            <div class="legend">
                <div class="all">
                    全体
                    <img src="../../assets/img/all.png" alt="">
                </div>
                <div class="part">
                    校区
                    <img src="../../assets/img/part.png" alt="">
                </div>
            </div>
            <div class="suggest">
                <h1>学习建议</h1>
                <!-- <p v-for="item in suggest" :key="item.id" v-if='item.id==showId'>
                    {{studentName}}{{item.content}}

                </p> -->
                <p>{{comment}}</p>
            </div>

                <!-- <div class="next-div"> -->
                <next />
                <!-- </div> -->
                <div class="footer">
                    <logo />
                </div>
        </div>
        <!-- <div class="footer">
            <logo />
        </div> -->
    </div>
</template>

<script>
import Logo from '../common/Logo.vue'
import Next from '../common/Next.vue'

import io from '../../lib/io'
import util from '../../lib/util'
export default {
    components: {
        Logo,
        Next,
    },
    data() {
        return {
            reportId :"",
            sysCode:'',
            option: {
                title: {
                    text: '人数分数分布图',
                    right:200,
                    textStyle:{
                        color:'#74a5e1',
                        fontSize:32,
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel:{
                        color:'#9cbadf',
                        fontSize:18
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#9cbadf'
                        }
                    },
                    axisTick:{
                        inside:true
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#f1f5fb'
                        }
                    },
                    data: ['','0','10', '20', '30', '40', '50', '60', '70','80','90','100']
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        color:'#9cbadf',
                        fontSize:25
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#9cbadf'
                        }
                    },
                    axisTick:{
                        inside:true
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#f1f5fb'
                        }
                    },
                },
                series: [
                    {
                        name: '全体',
                        type: 'line',
                        lineStyle:{color:'#fb6e58'},
                        symbol:'none',
                        data: ['',0,120, 132, 101, 134, 90, 230, 210,200,219,190]
                    },
                    {
                        name: '校区',
                        type: 'line',
                        lineStyle:{color:'#6fc2f7'},
                        symbol:'none',
                        data: ['',0,220, 182, 191, 234, 290, 330, 310,220,240,220]
                    }
                ]
            },
            suggest:[
                {
                    content:'同学知识点掌握程度弱，基础还有待进一步加强。建议同学在下阶段的学习中应从头开始加强对基础知识学习。',
                    id:1,
                    section:'0',
                },
                {
                    content:"同学掌握了本次考查的部分知识，基础还有待进一步加强。建议同学在下阶段的学习中应从头开始加强对基础知识学习。",
                    id:2,
                    section:'0-30'
                },
                {
                    content:"同学基本掌握了本次考查的知识，基础知识还可以进一步巩固并且应当加强解题方法的理解和运用。建议同学在下阶段的学习中应巩固已学的基础知识，并开始解题方法和技巧的学习。",
                    id:3,
                    section:'30-50'
                },
                {
                    content:"同学掌握了本次考查的知识，基础知识较为牢固，且掌握了一定的的解题方法和技巧。建议同学在下阶段应进一步加强解题方法和技巧的学习，且可以开始尝试部分高考真题。",
                    id:4,
                    section:'50-70'
                },
                {
                    content:"同学已熟练掌握了本次考查的知识，基础知识和解题方法都有较好的掌握情况。建议同学在下阶段的学习中应培养一题多解和多题一解的能力，同时可以尝试部分较为综合的难题。",
                    id:5,
                    section:'70-90'
                },
                {
                    content:"同学精通了本次考查的知识，基础知识较为扎实，能灵活使用解题方法和技巧。建议同学在下阶段的学习中提炼总结已掌握的知识和方法，形成一套适合自身的学习方法。另外，同学可以尝试更深层次的学习，加深对知识的理解。",
                    id:6,
                    section:'90-100'
                },
            ],
            showId:'',
            studentName:"",
            comment:'',
        }
    },
    created(){
        this.reportId = this.$route.query.reportId
        this.studentName = this.$route.query.studentName
        this.sysCode = util.getSysCode(this.$route.query.areamTeamId)
  
    },
    mounted(){
        this.$nextTick(()=>{
            this.reportScore()
        })
    },
    methods:{
        reportScore(){
            let param = {
                reportId:this.reportId,
                sysCode:this.sysCode,
            }
            io.post(io.reportScore,param,(ret)=>{
                if(ret.success){
                    this.comment = ret.data.comment
                    let xleng = ret.data.xAxis
                    xleng.unshift('')
                    this.option.xAxis.data = xleng //横坐标
                    let series = ret.data.series
                    series.map((item)=>{
                        var data = item.data
                        data.unshift('')
                        //  data.splice(0,1,'')
                        if(item.name=='全体'){
                            this.option.series[0].data = data
                            // console.log("xx",data)
                        }else if(item.name == '校区'){
                            this.option.series[1].data = data
                        }
                    })
                    // this.calcShowId(ret.data.getScore,ret.data.modelScore)

                    // console.log(ret)
                }else{
                    alert(ret.desc)
                }
            })
        },
        calcShowId(getScore,modelScore){
            let percent = util.formatNumber(getScore/modelScore*100 , 2)
            let breaks = false
            this.suggest.map((item)=>{
                let start  = item.section.split('-')[0]
                let end  = item.section.split('-')[1]
                if(breaks){
                    return 
                }
                if(percent!=0&&percent!=100){
                    // console.log(percent,Number(start)<=Number(percent),Number(percent)<Number(end))
                   
                    if(Number(start)<Number(percent)&&Number(percent)<=Number(end)){
                        // console.log("aa")
                        this.showId = item.id
                        return breaks = true
                    }else{
                        //  console.log("bb")
                        this.showId = 1
                    }
                    //  console.log(this.showId)
                }else if(percent==0){
                    this.showId = 1
                }else if(percent>=100){
                    this.showId = 6
                }
                
            })
        }
    },

}
</script>
<style lang="less" scoped>
.report-two {
    height: 100%;
    background: #edf5ff;
    position: relative;
    .header {
        height: 2.5rem;
        background: url('../../assets/img/rep-bg.png');
    }
}
.body {
    background: white;
    width: 90%;
    margin-left: 5%;
    min-height: 90vh;
    position: absolute;
    margin-bottom: 0.6rem;
    top: 3vh;
    border-radius: 0.1rem;
    box-shadow: 0px 5px 18px 0px rgba(189, 217, 253, 0.5);
    h4 {
        height: 0.4rem;
        font-size: 0.4rem;
        line-height: 0.4rem;
        font-weight: normal;
        color: #ff7853;
        margin-top: 0.4rem;
        margin-left: 0.44rem;
        margin-bottom: 0.5rem;
        span {
            font-size: 0.52rem;
            height: 0.4rem;
            line-height: 0.4rem;
            font-weight: normal;
            display: inline-block;
            color: #74a5e1;
            padding-right: 0.22rem;
            border-right: 3px solid #74a5e1;
            font-weight: 100;
            float: left;
            margin-right: 0.2rem;
        }
    }
}
.legend{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.24rem;
    color: #666;
    img{
        margin-left: 0.1rem;
    }
    .all{
        margin-right: 0.3rem;
    }
}
.suggest{
    padding: 0.4rem 0.4rem;
    box-sizing: border-box;
    border-top: 2px solid #edf5ff;
    margin-top: 0.3rem;
    h1{
        font-size: 0.32rem;
        line-height: 0.32rem;
        color: #74a5e1;
        text-align: center;
        margin-bottom: 0.3rem;
    }
    p{
        font-size: 0.24rem;
        color: #666;
        line-height: 0.34rem;
        padding-bottom: 0.4rem;
    }
}
    .footer {
        position: absolute;
        bottom: -0.57rem;

        // bottom: 0.15rem;
        width: 100%;
        text-align: center;
    }
</style>
